<template>
    <div class="search_bar_container">
        <el-row :gutter="10" class="search_bar">
            <el-col :span="6">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="select_store flex_row" style="cursor: pointer;">
                            <span class="select_store_span font_black3">仓库：</span>
                            <el-select class="select_store_el" style="flex: 1;" v-model="reqQuery.storeid"
                                placeholder="请选择" size="mini" @change="selectHandleChange">
                                <el-option v-for="item in store_ls" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="18">
                <div class="flex_between">
                    <div class="flex_row mr10 flex1">
                        <div class="date-box flex_between flex1 mr20">
                            <div :class="['date-box-item', 'flex_center', item.id == reqQuery.group ? 'active' : '']"
                                v-for="item in group_ls" :key="item.id" @click.stop="selectDate(item.id)">
                                <span> {{ item.name }} </span>
                            </div>
                        </div>
                        <div style="width: 220px;">
                            <el-date-picker style="width: 220px;" size="mini" v-model="dateArray" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="handleDateChange">
                            </el-date-picker>
                        </div>
                    </div>
                    <div>
                        <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps, defineEmits, defineExpose, onUnmounted, onBeforeUnmount } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()
import downloadFile from "@/js/upload/DownloadFile.js"

import { useBoundState } from '@/pages/report/hooks/useBoundState'
// 使用销售状态
const {
    store_ls,
    reqQuery,
    selectHandleChange,
    group_ls,
    selectDate,
    dateArray,
} = useBoundState()


// 日期选择器配置
const pickerOptions = {
    disabledDate(time) {
        return time.getTime() > Date.now()
    }
}

const handleDateChange = (val) => {
    console.log("val=xxxx--", val)
    if (val) {
        reqQuery.value.stime = val[0]
        reqQuery.value.dtime = val[1]
        reqQuery.value.group = '5'
        selectHandleChange()
    } else {
        reqQuery.value.stime = ''
        reqQuery.value.dtime = ''
        reqQuery.value.group = ''
        selectHandleChange()
    }
}

const handleExport = async () => {
    if (!reqQuery.value.stime && !reqQuery.value.dtime) {
        return proxy.$message.error('请选择导出报表的开始日期和结束日期')
    }
    const p = JSON.parse(JSON.stringify(reqQuery.value))
    delete p.pageTow
    try {
        downloadFile.downloadShopSellExport(p)
    } catch (error) {
        console.error('Export failed:', error);
    }
}

onMounted(() => {})

</script>

<style lang="scss" scoped>
.search_bar_container {
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 4px;
}

.search_bar {
    border-bottom: 1px solid #f1f5f9;
    padding: 10px;
}

.date-box {
    height: 28px;
    border: 1px solid #dddfe2;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.3s;
}

.date-box-item {
    height: 100%;
    flex: 1;
    border-right: 1px solid #dddfe2;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.date-box-item:last-child {
    border-right: none;
}

.date-box-item:hover:not(.active) {
    color: #3388ff;
}

.active {
    background-color: #3388ff;
    color: #fff;
}

.select_store ::v-deep .el-input__inner {
    background-color: #fff !important;
    border: 1px solid #dddfe2 !important;
    // color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    border-radius: 4px !important;
    transition: all 0.3s;
}

.select_store ::v-deep .el-input__inner:hover {
    border-color: #3388ff !important;
}
</style>